{% extends 'base_head.html' %}
{% block head %}
{% load static %}
    {% block title %} Оформление заказа {% endblock %}
    {{ block.super }}  
{% endblock %}
{% block navbar %}
    {{ block.super }}     
{% endblock %}
{% block content %}
    <body class="bg-light">
        <div class="container">
            <div class="py-5 text-center">
                <h2>Оформление заказа</h2>
            </div>
    
            <div class="row">
                <div class="col-md-4 order-md-2 mb-4 fixed">
                    <h4 class="d-flex justify-content-between align-items-center mb-3">
                        <span class="text-muted">Корзина</span>
                        <span class="badge badge-secondary badge-pill">{{cart.cart_items.count}}</span>
                    </h4>
                    <ul class="list-group mb-3">
                        {% for item in cart.cart_items.all %}
                        <li class="list-group-item d-flex justify-content-between lh-condensed">
                            <div>
                                <h6 class="my-0">{{item.shoe.brand}} {{item.shoe.model}}</h6>
                                <small class="text-muted">Цвет: {{item.shoe.color}}, Размер: {{item.size}}, Кол-во: {{item.quantity}}</small>
                            </div>
                            <span class="text-muted">₽{{item.shoe.price}}</span>
                        </li>
                        {% endfor %}
                
                        <li class="list-group-item d-flex justify-content-between">
                            <span>Сумма (руб.)</span>
                            <strong>₽{{cart.total}}</strong>
                        </li>
                    </ul>
                </div>
                <div class="col-md-8 order-md-1">
                    <h4 class="mb-3">Данные для доставки</h4>
                    <form action="/checkout_process_guest" method="post" class="needs-validation" novalidate>
                        {% csrf_token %}
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="firstName">Имя</label>
                                <input type="text" name="first_name" class="form-control" id="firstName" placeholder="" value="" required>
                                <div class="invalid-feedback">
                                    Требуется ввести имя.
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="lastName">Фамилия</label>
                                <input type="text" name="last_name" class="form-control" id="lastName" placeholder="" value="" required>
                                <div class="invalid-feedback">
                                    Требуется ввести фамилию.
                                </div>
                            </div>
                        </div>
    
                        <div class="mb-3">
                            <label for="email">Электронная почта</label>
                            <input type="text" name="email" class="form-control" id="email" placeholder="IvanIvanov@mail.ru" required>
                            <div class="invalid-feedback">
                                Введите корректный адрес электронной почты.
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-5 mb-3">
                                <label for="city">Город</label>
                                <input type="text" name="city" class="form-control" id="city" placeholder="Москва" required>
                                <div class="invalid-feedback">
                                    Требуется ввести город.
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="zip">Почтовый индекс</label>
                                <input type="text" name="zipcode" class="form-control" id="zip" placeholder="">
                            </div>
                        </div>
    
                        <div class="mb-3">
                            <label for="address">Улица, дом, квартира</label>
                            <input type="text" name="address" class="form-control" id="address" placeholder="Ленина д.5 кв.2" required>
                            <div class="invalid-feedback">
                                Введите адрес доставки.
                            </div>
                        </div>
    
                        <div class="mb-3">
                            <label for="address2">Комментарий <span class="text-muted"></span></label>
                            <input type="text" name="address2" class="form-control" id="address2" placeholder="">
                        </div>
    

                        <hr class="mb-4">                
                        <div id='billing_address' style='display: none'>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label>First name</label>
                                    <input type="text" name="cc_first_name" class="form-control" placeholder="">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label>Last name</label>
                                    <input type="text" name="cc_last_name" class="form-control" placeholder="">
                                </div>
                            </div>
                
                            <div class="mb-3">
                                <label>Address</label>
                                <input type="text" name="cc_address" class="form-control" placeholder="1234 Main St">
                            </div>
                
                            <div class="mb-3">
                                <label>Address 2 <span class="text-muted">(Optional)</span></label>
                                <input type="text" name="cc_address2" class="form-control" placeholder="Apartment or suite">
                            </div>

                            <div class="row">
                                <div class="col-md-5 mb-3">
                                    <label>City</label>
                                    <input type="text" name="cc_city" class="form-control" placeholder="">
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label>Zip Code</label>
                                    <input type="text" name="cc_zipcode" class="form-control" placeholder="">
                                </div>
                            </div>
                        </div>
                        <hr class="mb-4">
                        <button class="btn btn-primary btn-lg btn-block" type="submit">Checkout</button>
                    </form>
                </div>
            </div>
    
            <footer class="my-5 pt-5 text-muted text-center text-small">
                <p class="mb-1">&copy; {{ current_year }} Crossboost </p>
            </footer>
        </div>
    
        <!-- Bootstrap core JavaScript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
        <script src="../../assets/js/vendor/popper.min.js"></script>
        <script src="../../dist/js/bootstrap.min.js"></script>
        <script src="../../assets/js/vendor/holder.min.js"></script>
        <script>
          // Example starter JavaScript for disabling form submissions if there are invalid fields
          (function() {
            'use strict';
    
            window.addEventListener('load', function() {
              // Fetch all the forms we want to apply custom Bootstrap validation styles to
              var forms = document.getElementsByClassName('needs-validation');
    
              // Loop over them and prevent submission
              var validation = Array.prototype.filter.call(forms, function(form) {
                form.addEventListener('submit', function(event) {
                  if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                  }
                  form.classList.add('was-validated');
                }, false);
              });
            }, false);
          })();
        </script>
    </body>
{% endblock %}